<template>
  <a-layout class="layout">
    <a-layout-header class="header">
      <div class="logo">Cesium开发示例(版本v1.113)</div>
      <a-menu v-model:selectedKeys="crtMenu" @click="onClickMenu" theme="dark" mode="horizontal"
        :style="{ lineHeight: '64px' }">
        <a-menu-item key="home">首页</a-menu-item>
        <a-menu-item key="source">示例</a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout style="height:calc(100vh - 64px);overflow:hidden">
      <a-layout-sider v-model:collapsed="collapsed" collapsible style="position:relative">
        <div class="sider-content">
          <a-menu v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" mode="inline" theme="dark"
            @click="onClickExample" :style="{ height: '100%', borderRight: 0 }">
            <a-sub-menu v-for="(item, index) in examples" :key="item.key">
              <template #icon>
                <component :is="item.icon" />
              </template>
              <template #title>
                <span>
                  {{ item.title }}
                </span>
              </template>
              <a-menu-item :key="it.url" v-for="(it, index) in item.children">{{ it.title }}</a-menu-item>
            </a-sub-menu>
          </a-menu>
        </div>
      </a-layout-sider>
      <a-layout-content style="position: relative;height:calc(100vh - 64px);overflow-y:auto;">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { examples } from './common/example';
import { useRoute, useRouter } from 'vue-router'

const collapsed = ref(false)
const crtMenu = ref(['home'])
const selectedKeys = ref([])
const openKeys = ref([])

const route = useRoute()
const router = useRouter()

onMounted(() => {

  parseSelectedKeys()
})

watch(route, v => {
  parseSelectedKeys()
})

const onClickMenu = ({ key }) => {
  if (key == 'home') {
    router.push({ name: 'home' })
  } else {
    clickExample(examples[0].children[0])
  }
}

const onClickExample = ({ key }) => {
  let item = null;
  for (let i = 0; i < examples.length; i++) {
    for (let y = 0; y < examples[i].children.length; y++) {
      let it = examples[i].children[y];
      if (it.url == key) {
        item = it;
        break;
      }
    }
  }
  if (item) {
    clickExample(item)
  }
}

const clickExample = item => {

  router.push({
    name: 'source',
    query: {
      path: item.url,
      title: item.title,
    }
  })
}

const parseSelectedKeys = () => {

  setTimeout(() => {

    const path = route.query.path;
    if (path) {
      crtMenu.value = ['source']
      let opened = null;
      let selected = path

      examples.forEach(i => {
        i.children.forEach(n => {
          if (n.url == path) {
            opened = i.key
          }
        })
      })

      selectedKeys.value = [selected]
      openKeys.value = [opened]
    }
  }, 100);
}

</script>

<style scoped lang="less">
.layout {
  min-height: 100vh;

  .header {
    display: flex;
    flex-direction: row;


    .logo {
      color: #fff;
      font-weight: bold;
      font-size: 1.6em;
      width: 600px;
      padding-right: 24px;
    }
  }

  ::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
  }

  .sider-content {
    height: 100%;
    overflow-y: auto;


  }
}
</style>